<style lang="scss">
    .loaddingAnmation {
        margin: 0 auto;
        width: 100px;
    }

    .loadding-icon {
        float: left;
    }

    .loadding-text {
        height: 28px;
        display: block;
        text-align: center;
        line-height: 28px;
        float: left;
        /*padding-left: 10px;*/
    }

</style>

<template>
    <div class="loaddingAnmation clearfix" v-if="toggleShowLoadding&&hasMore">
        <div class="loadding-icon">
            <mt-spinner type="fading-circle"></mt-spinner>
        </div>
        <span class="loadding-text" >
            加载中...
        </span>
    </div>
    <div class="loaddingAnmation clearfix" v-else-if="toggleShowLoadding&&!hasMore">
      <span class="loadding-text" >
            没有更多数据...
      </span>
    </div>

</template>

<script>

	import Vue from 'vue';
	// 加载更多
	import { Spinner } from 'mint-ui';
	Vue.component(Spinner.name, Spinner);
	export default {
    data() {
      return {
        toggleShowLoadding: false,
        ele: '',
        ii: ''
      }
    },
    methods:{
      callBack(){
        if(this.ele.scrollHeight - this.ele.scrollTop == this.ele.clientHeight&&this.hasMore){
          this.toggleShowLoadding = true;
          this.fetchMoreData();
        }
      }
    },
    name: 'loadMoreAnimation',
		props: ['hasMore','container','fetchMoreData'],
    mounted(){
      this.ele = document.querySelector('.'+this.container)
      if(!this.hasMore) {
        this.ele.removeEventListener("scroll",this.callBack);
      } else {
        this.ele.addEventListener("scroll",this.callBack,false);
      }
    }
	}

</script>
